import { defineComponent } from "@/shared/define.js";

/**
 * @alias nfi-root
 */
export const nfiRoot = defineComponent({
  templateUrl: "nfi-root.html",
  controller: class {
    /**
     * @type {string[]}
     */
    static $inject = ["$scope"];

    /**
     * @param {ng.IScope} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
    }

    wrappers = new Proxy(
      /**
       * @type {unknown[]}
       */ ([]),
      {
        get(t, p) {
          console.log("Get wrappers", p);
          return Reflect.get(t, p);
        },
        set(t, p, v) {
          console.log("Get wrappers", p, v);
          return Reflect.set(t, p, v);
        },
      },
    ); // initialize the array so that the wrappers are assigned into the parent scope

    handleClick = () => {
      console.log("nfiRoot.handleClick", this);
    };
  },
});
/**
 * @alias nfi-toggle
 */
export const nfiToggle = defineComponent({
  template: html`
    <strong>nfiToggle</strong>
    <button
      class="btn btn-default"
      ng-click="$ctrl.toggle()"
      ng-transclude
    ></button>
  `,
  transclude: true,
  controller: class ToggleController {
    isOpen = () => this.opened;

    toggle = () => {
      this.opened = !this.opened;
    };

    opened = false;
  },
});
/**
 * @alias nfi-wrapper
 */
export const nfiWrapper = defineComponent({
  transclude: true,
  template: html`
    <strong>nfiWrapper</strong>
    <div>
      🟢ngRepeatToggle.isOpen(): {{$ctrl.ngRepeatToggle.isOpen() | json}}
    </div>
    <!-- define slot -->
    <nfi-toggle ng-ref="$ctrl.ngRepeatToggle">
      <ng-transclude></ng-transclude>
    </nfi-toggle>
  `,
});

/**
 * @alias "nfi-root.html"
 */
export const nfiRootHtml = html`
  <strong>nfiRoot</strong>
  <!-- ng-ref 导出了一个变量 -->
  <nfi-toggle ng-ref="$ctrl.outerToggle">Outer Toggle</nfi-toggle>
  <!-- ref from root -->
  <div>⭕outerToggle.isOpen(): {{$ctrl.outerToggle.isOpen() | json}}</div>
  <div>
    <strong>wrappers assigned to root</strong>
    <hr />
    <!-- 这里的将在之后被渲染 -->
    <div class="ref" ng-repeat="wrapper in $ctrl.wrappers">
      🟢{{$index}} wrapper.ngRepeatToggle.isOpen():
      {{wrapper.ngRepeatToggle.isOpen() | json}}
    </div>
    <hr />

    <ul>
      <!-- 这里的repeat在parser时被渲染执行 -->
      <li class="ref" ng-repeat="(index, value) in [1,2,3]">
        <strong>ngRepeat</strong>
        <!-- ref from root -->
        <div>⭕outerToggle.isOpen(): {{$ctrl.outerToggle.isOpen() | json}}</div>
        <!-- 触发副作用! 将把 $ctrl.wrappers 的对应值变成 -->
        <nfi-wrapper ng-ref="$ctrl.wrappers[index]">
          ngRepeat Toggle {{$index + 1}}
        </nfi-wrapper>
      </li>
    </ul>

    <hr
      aria-describedby="------------------------------------------------------"
    />

    <div>
      nfiToggle#ngIf.isOpen(): {{nfiIfToggle.isOpen()}} // This is always
      undefined because it's assigned to the child scope created by ngIf.
    </div>
    <div class="ref" ng-if="true">
      <strong>ngIf</strong>
      <nfi-toggle ng-ref="nfiIfToggle">ngIf Toggle</nfi-toggle>
      <div>nfiToggle#ngIf.isOpen(): {{nfiIfToggle.isOpen() | json}}</div>
      <!-- ref from root -->
      <div>⭕outerToggle.isOpen(): {{$ctrl.outerToggle.isOpen() | json}}</div>
    </div>

    ${DebugButtonHTML("$ctrl")}
  </div>
`;
